import { history } from 'alita';
import style from './Nav.less';

type PropsType = {
  title?: string;
  list: {
    hide?: boolean;
    name?: string;
    url?: string;
    icon?: string;
    size?: number;
  }[];
};

export default (props: PropsType) => {
  function navigate(url: string) {
    if (url) {
      history.push(url);
    }
  }
  return (
    <>
      <div className={style.wrap}>
        {props.title && (
          <div className={style.title}>
            <div className={style.line}></div>
            {props.title}
          </div>
        )}
        <div className={style.content}>
          {props.list
            .filter((item) => !item.hide)
            .map((item, index) => {
              if (JSON.stringify(item) == '{}') {
                return <div key={index} className={style.item}></div>;
              }
              if (item.icon) {
                return (
                  <div
                    key={index}
                    onClick={() => navigate(item.url || '')}
                    className={style.item}
                  >
                    <i
                      style={{ fontSize: item.size || 30 }}
                      className={`iconfont ${item.icon}`}
                    ></i>
                    <div className={style.name}>{item.name}</div>
                  </div>
                );
              } else {
                return (
                  <div
                    key={index}
                    onClick={() => navigate(item.url || '')}
                    className={style.item}
                  >
                    <div className={style.square}>{item.name}</div>
                  </div>
                );
              }
            })}
        </div>
      </div>
    </>
  );
};
